<script setup>
  import borderView from '@/components/border-style/index.vue'
  import titleView from '@/components/title-img/index.vue'
  import { useI18n } from "vue-i18n";

  const { t } = useI18n()

  const tabsList = computed(() => {
    return [
      {
        label: t('content.contact.introducePage'),
        url: ''
      }, {
        label: t('content.contact.teachePage'),
        url: ''
      }, {
        label: t('content.contact.prohibitedPage'),
        url: ''
      }, {
        label: t('content.contact.ConditionsPage'),
        url: ''
      }
    ]
  })
  const activeIndex = ref(0)

  const ProhibitedList = ref([
    {
      title: '各類烈性毒藥、生化製品、和傳染性物品',
      titleEn: 'All kinds of deadly poisons, biochemical products, and infectious materials',
      example: '如炭疽、危險性病菌、醫藥用廢棄物、農藥、鉈、氰化物、二惡英、滴滴涕、氯丹、萊克多巴胺、鹽酸萊克多巴胺、砒霜、催淚彈、白色晶體狀、粉狀、膏狀物品等',
      exampleEn: 'Such as anthrax, dangerous pathogens, medical waste, pesticides, strontium, cyanide, dioxins, DDT, chlordane, ractopamine, ractopamine hydrochloride, arsenic, tear gas, white crystal, powder, paste items, etc.',
      remark: '《禁止出口貨物目錄》第三批、《中國禁止或嚴格限制的有毒化學品名錄》',
      remarkEn: 'The Third Batch of Catalogue of Prohibited Exports, the List of Toxic Chemicals Prohibited or Strictly Restricted in China'
    }, {
      title: '緻人成癮的麻醉藥物和精神物品',
      titleEn: 'Addictive narcotic drugs and psychotropic substances',
      example: '如毒品、鴉片（包括罌粟殼、花、苞、葉等）、嗎啡、可卡因、海洛因、大麻、冰毒等',
      exampleEn: 'such as narcotics (including poppy shells, flowers, bracts, leaves), morphine, cocaine, heroin, marijuana, methamphetamine, etc.',
      remark: '《精神藥品管制品種目錄》',
      remarkEn: 'The Catalogue of Psychotropic Drugs under Control'
    }, {
      title: '國家法令禁止流通或寄運的物品',
      titleEn: 'Items whose circulation or mailing is prohibited by national laws and regulations',
      example: '如文物、管制類刀具、古董、各種武器、模擬武器（模擬玩具槍等）、彈藥、國家貨幣（現金等）、證券、偽造的貨幣及證券、原料血漿、勞改產品等',
      exampleEn: 'such as cultural relics, controlled knives, antiques, various weapons, simulated weapons (simulated toy guns, etc.), ammunition, national currency (cash, etc.), securities, counterfeit currency and securities, source plasma, labor reform products, etc.',
      remark: '參照法律：《文物保護法》、《公安部管制刀具目錄》、《中華人民共和國槍支管理法》、《民用爆炸物品安全管理條例》',
      remarkEn: 'Reference laws: The Cultural Relics Protection Law, the Catalogue of Controlled Knives Defined by the Ministry of Public Security, the Law of the People\'s Republic of China on Firearms Management, the Regulations on the Safety Management of Civil Explosives'
    }, {
      title: '對中國政治、經濟、文化、道德（法輪功等）有害的物品，內容涉及國家秘密的物品，帶有違反“一個中國”原則內容的貨物及其包裝。如含有反動、淫穢、有傷風化或法輪功等的報刊、書籍、圖片、宣傳品、音像製品，電腦磁片及光碟等',
      titleEn: "Items that are harmful to China's politics, economy, culture, morality (Falun Gong, etc.); items whose content involve state secrets; goods whose content and package thereof violate the 'one China' principle. Such as newspapers, books, pictures, publicity materials, audio-visual products, computer disks and CDs that contain reactionary, obscene, indecent or Falun Gong, etc.",
      example: '如光碟、磁帶、錄影帶等內容的載體',
      exampleEn: 'Such as a carrier of such content as CDs, audio and record tapes, and video tapes',
      remark: '參照法律：《憲法》、《刑法》、《中華人民共和國保守國家機密法》等',
      remarkEn: 'Reference laws:The Constitution of the PRC, the Criminal Law of the PRC, Law of the PRC on Guarding State Secrets'
    }, {
      title: '妨礙公共衛生的物品',
      titleEn: "Items that do harm to public hygiene",
      example: '如屍骨、骨灰、靈柩、未經硝制的獸皮、未經藥制的獸骨、未經加工或經脫脂的虎骨、土壤、動物屍體、動植物病源（包括菌種、毒種等）等',
      exampleEn: 'Such as bones, ashes, coffins, non-tanned animal hides, animal bones that have not been processed for making medicines, unprocessed or degreased tiger bones, soil, animal carcasses, animal and plant pathogens (including strains, poisonous species, etc.).',
      remark: '《禁止出口貨物目錄》第一批',
      remarkEn: 'The First Batch of the Catalogue of Prohibited Exports'
    }, {
      title: '動物、植物以及它們的標本和一些自然資源',
      titleEn: "Animals, plants and their specimens and some natural resources",
      example: '犀牛角、牛黃、虎骨、獸皮、毛皮（皮草）、麝香、髮菜、麻黃草、野生紅豆杉、原木、木炭、森林凋落物、泥炭（草炭）、矽砂、石英砂及其它天然砂石、紅木、種子（其它繁殖材料）、動植物等',
      exampleEn: 'Rhinoceros horn, bezoar, tiger bone, animal skin, fur, musk, hairy vegetable, ephedra, wild yew, log, charcoal, forest litter, peat, silica sand, quartz sand and other natural sandstone , mahogany, seeds (other reproductive materials), animals and plants, etc.',
      remark: '《禁止出口貨物目錄》第一批、第二批、第四批、第五批',
      remarkEn: 'The First Batch,  the Second Batch, the Fourth Batch and the Fifth Batch of the Catalogue of Prohibited Exports'
    }, {
      title: '具有放射性的物品及各種危險品（外包裝有危險標誌的物品）',
      titleEn: "Radioactive items and various dangerous goods (items with hazard signs on the outer packing)",
      example: '如爆炸物品（雷管、導火索、火藥、炸藥等）、核能物品等',
      exampleEn: 'Such as explosives (detonators, fuses, gunpowder, explosives, etc.), nuclear energy, etc.',
      remark: '《放射性物品運輸安全管理條例》、《民用爆炸物品進出口管理辦法》',
      remarkEn: 'Regulations on the Safety Management of Radioactive Goods Transportation and the Measures for the Administration of Import and Export of Civil Explosives'
    }, {
      title: '醫療廢物、化學廢物、工業廢物等',
      titleEn: "Medical waste, chemical waste, industrial waste, etc.",
      example: '如使用過的一次性注射器等',
      exampleEn: 'Such as disposable syringes that have been used, etc.',
      remark: '《環境保護法》',
      remarkEn: 'The Environmental Protection Law'
    }, {
      title: '氣體（不論何種顏色）',
      titleEn: "Gas (regardless of color)",
      example: '如壓縮氣體、乾冰、滅火器、蓄氣筒、充氣球體、救生器、易爆開的汽車安全氣囊、氣霧劑、氣體打火機、瓦斯氣瓶、燈泡等',
      exampleEn: 'Such as compressed gas, dry ice, fire extinguishers, gas cylinders, inflatable spheres, life savers, explosive airbags, aerosols, gas lighters, gas cylinders, light bulbs, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '易爆物品',
      titleEn: "Explosive items",
      example: '如煙火製品（禮花、鞭炮、摔炮、拉炮等）、發令紙、乾冰、帶氣打火機、煤氣爐、煤氣罐、火器等',
      exampleEn: 'Such as pyrotechnic products (fireworks, firecrackers, smashing guns, crackers, etc.), hairline paper, dry ice, gas lighters, gas stoves, gas tanks, firearms, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '易燃液體',
      titleEn: "Flammable liquids",
      example: '如油墨、去光水、油漆、石油、汽油、煤油、柴油、苯、酒精類、機油、樟腦油、發動機起動液、松節油、天拿水、膠水（如強力膠、保麗龍膠、發泡膠等）、香水、噴霧殺蟲劑、空氣清新劑、化妝品等',
      exampleEn: 'such as inks, light removal water, paint, petroleum, gasoline, kerosene, diesel, benzene, alcohol, motor oil, camphor oil, engine starter fluid, turpentine, lacquer thinner, glue (such as super glue, styrofoam, etc.), perfume, spray insecticide, air freshener, cosmetics, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '易燃固體（包括自燃物質，遇水釋放易燃氣體的物質等）',
      titleEn: "Flammable solids (including pyrophoric substances, substances that release flammable gases in contact with water, etc.)",
      example: '如煤、松香、石蠟、活性碳、鈦粉、椰肉乾、蓖麻製品、橡膠碎屑、安全火柴(盒擦的或片擦的)、白磷、黃磷、油麻、金屬鈉、鋁粉、鎂粉、固體膠（包括白膠等）、印泥、芳香劑、瀝青等',
      exampleEn: 'such as coal, rosin, paraffin, activated carbon, titanium powder, copra, ramie products, rubber crumbs, safety matches (box rubbed or piece rubbed), white phosphorus, yellow phosphorus, linseed, metal sodium, aluminum powder, magnesium powder, solid glue (including white plastic, etc.), inkpad, fragrance, asphalt, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '化學藥品、化學實驗用品、醫療製品等',
      titleEn: "Chemical medicines, chemical laboratory supplies, medical products, etc.",
      example: '如高錳酸鉀、硫酸、呋喃、疫苗、血液製品等',
      exampleEn: 'Such as potassium permanganate, sulfuric acid, furan, vaccines, blood products, etc.',
      remark: '《禁止出口貨物目錄》第三批',
      remarkEn: 'The Third Batch of the Catalogue of Prohibited Exports'
    }, {
      title: '氧化劑和有機過氧化物',
      titleEn: "Oxidants and organic peroxides",
      example: '如氧化氫、過氧化鈉、次氯酸鈣、氯酸鉀、硝酸鉀、不明化學成份物品等',
      exampleEn: 'Such as hydrogen peroxide, sodium peroxide, calcium hypochlorite, potassium chlorate, potassium nitrate, unidentified chemical ingredients, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '毒害品和感染性物品：指在流通過程中容易發生中毒和感染的物品',
      titleEn: "Toxic and Infectious items: Items that are prone to poisoning and infection during circulation",
      example: '如殺蟲劑、農藥、獸藥、滅草劑、砷及其化合物、汞及其化合物、氰及其化合物、哥羅仿、苯銨、生漆、血液、尿液、體液、用於清洗劑的四氯化碳、1、1、1-三氯乙烷（甲基氯仿）和三氯三氟乙烷、多氯聯苯、多溴聯苯、石棉等',
      exampleEn: 'Such as pesticides, pesticides, veterinary drugs, herbicides, arsenic and its compounds, mercury and its compounds, cyanide and its compounds, groin, benzoic acid, lacquer, blood, urine, body fluids, carbon tetrachloride used for detergent, 1.1.1-trichloroethane (methyl chloroform) and trichlorotrifluoroethane, polychlorinated biphenyls, polybrominated biphenyls, asbestos, etc.',
      remark: '《禁止出口貨物目錄》第一批、第三批、《農藥名錄》',
      remarkEn: 'The First and Third Batch of the Catalogue of Prohibited Exports, the ist of Pesticide'
    }, {
      title: '腐蝕品（包括能灼燒人體組織，並對金屬等物品造成損壞的固體和液體等）',
      titleEn: "Corrosive products (including solids and liquids that can burn human tissue and damage metals and other items)",
      example: '如硫酸、硝酸、鹽酸、氯磺酸、冰醋酸、燒鹼、雙氧水等',
      exampleEn: 'Such as sulfuric acid, nitric acid, hydrochloric acid, chlorosulfonic acid, glacial acetic acid, caustic soda, hydrogen peroxide, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '各種流通貨幣、賭博設備及器具等',
      titleEn: "All kinds of currency in circulation, gambling equipment and device, etc.",
      example: '各國貨幣、財博設備等',
      exampleEn: 'Currency in different countries, gambling equipment and device, etc.',
      remark: '《中華人民共和國郵政法》、《中華人民共和國貨物進出口管理條例》',
      remarkEn: 'The Postal Law of the PRC, the Regulations of the PRC on the Administration of the Import and Export of Goods'
    }, {
      title: '肥料',
      titleEn: "Fertilizer",
      example: '如尿素、硝酸銨、過磷酸鈣、氨水等',
      exampleEn: 'Such as urea, ammonium nitrate, superphosphate, ammonia, etc.',
      remark: '國家出口配額類商品，快件方式不予收寄',
      remarkEn: 'Items subject to national export quota will not be accepted for mailing by express courier service'
    }, {
      title: '鮮活類物品、易腐爛物品、動物乳製品等物品',
      titleEn: "Fresh and live items, perishable items, animal dairy products, etc.",
      example: '如蜂蜜、蛋類、酒、糖、食品等',
      exampleEn: 'Such as honey, eggs, wine, sugar, food, etc.',
      remark: '涉證涉檢敏感貨物，快件方式不予收寄',
      remarkEn: 'Sensitive goods subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '關係國計民生，實行國營貿易管制的商品',
      titleEn: "Goods that are related to the national economy and the people’s livelihood and subject to state-run trade control",
      example: '如玉米、大米、煤炭、棉花、原油、成品油、銻及銻製品、鎢及鎢製品、白銀、小麥、玉米粉、大米粉、小麥粉、鋸材、煤炭、焦炭、稀土、鋅礦砂、錫及錫製品、銦及銦製品、鉬、磷礦石等',
      exampleEn: 'Such as corn, rice, coal, cotton, crude oil, refined oil, tantalum and tantalum products, tungsten and tungsten products, silver, wheat, corn flour, rice flour, wheat flour, sawn timber, coal, coke, rare earth, zinc ore, tin and Tin products, indium and indium products, molybdenum, phosphate rock, etc.',
      remark: '國家出口配額類商品，快件方式不予收寄',
      remarkEn: 'Items subject to national export quota will not be accepted for mailing by express courier service'
    }, {
      title: '實行出口配額招標和出口授權管理的商品',
      titleEn: "Goods subject to export quotas bid and import license control",
      example: '藺草及藺草製品、碳化矽、氟石塊（粉）、滑石塊（粉）、輕（重）燒鎂、礬土、甘草及甘草製品、石蠟、鋅及鋅基合金、汽車及其底盤、摩托車及其發動機和車架、檸檬酸、維生素C、青黴素工業鹽、硫酸二鈉等',
      exampleEn: 'Valerian and alfalfa products, silicon carbide, fluorspar (powder), talc (powder), light (heavy) burnt magnesium, bauxite, licorice and licorice products, paraffin, zinc and zinc-based alloys, automobiles and its underpan, motorcycle and its engine and frame, citric acid, vitamin C, penicillin industrial salt, disodium sulfate, etc.',
      remark: '國家出口配額類商品，快件方式不予收寄',
      remarkEn: 'Items subject to national export quota will not be accepted for mailing by express courier service'
    }, {
      title: '保護森林資源，防止亂砍濫伐',
      titleEn: "Protection of forest resources and prevention from excessive deforestation",
      example: '如：木炭等',
      exampleEn: 'Such as: charcoal, etc.',
      remark: '《禁止出口貨物目錄》第二批',
      remarkEn: 'The Second Batch of the Catalogue of Prohibited Exports'
    }, {
      title: '黃金白銀鉑等貴金屬製品以及其它貴重物品',
      titleEn: "Precious metal products such as gold, silver and platinum, and other valuables",
      example: '如金、銀、鉑、寶石、珠寶、珍珠、象牙等',
      exampleEn: 'Such as gold, silver, platinum, precious stones, jewelry, pearls, ivory, etc.',
      remark: '《禁止出口貨物目錄》第一批',
      remarkEn: 'The First Batch of the Catalogue of Prohibited Exports'
    }, {
      title: '無線電收發信機、通信保密機等',
      titleEn: "Radio transceiver, communication security machine, etc.",
      example: '如雷達等發射機、接收機設備等',
      exampleEn: 'Such as radar and other transmitters, receiver equipment, etc.',
      remark: '影響國家安全、涉證涉證貨物，快件方式不予收寄',
      remarkEn: 'Items affecting national security and subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '帶電物品（除含鋰電池電子產品外）',
      titleEn: "Electronic items (except the electronic products containing lithium battery)",
      example: '允許收寄',
      exampleEn: 'Mailing is allowed',
      remark: '涉證涉檢敏感貨物，快件方式不予收寄',
      remarkEn: 'Sensitive goods subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '蓄電池、鹼性電池、鹼性的電池液等',
      titleEn: "Accumulator, alkaline battery, alkaline battery fluid, etc.",
      example: '如蓄電池、鹼性電池等',
      exampleEn: 'Such as accumulators, alkaline batteries, etc.',
      remark: '影響運輸安全，不予收寄',
      remarkEn: 'Items that affects transport safety will not be accepted for mailing'
    }, {
      title: '含鋰電池電子產品',
      titleEn: "Electronic products containing lithium battery",
      example: '允許收寄',
      exampleEn: 'Mailing is allowed',
      remark: '不允許收寄地區涉證涉檢敏感貨物，快件方式不予收寄, 新馬地區：內置電池貨物，需提供MSDS；內置電池貨物需與普通貨物分開包裝；',
      remarkEn: 'Sensitive goods subject to certification and/or inspection in the area where the receipt and mailing thereof is not allowed will not be accepted for mailing by express courier service; Singapore and Malaysia: built-in battery goods, MSDS required; built-in battery goods shall be packed separately from ordinary goods;'
    }, {
      title: '液體（不論使用何種包裝）',
      titleEn: "Liquids (regardless of what kind of package is used)",
      example: '允許收寄',
      exampleEn: 'Mailing is allowed',
      remark: '因無法辨認成份，影響快件運輸安全，不予收寄；新馬地區香水，噴霧，指甲油屬於易燃液體，因此禁運；其他可運',
      remarkEn: 'Items that affect transport safety due to their elements are unidentifiable will not be accepted for mailing; all liquids will be accepted for mailing, except for perfumes, sprays and nail polishes which are identified in Singapore and Malaysia as flammable liquids'
    }, {
      title: '凍鮮肉類',
      titleEn: "Frozen meat",
      example: '如冰鮮牛肉、凍牛肉、冰鮮豬肉、凍豬肉、冰鮮雞肉、凍雞肉等',
      exampleEn: 'Such as chilled beef, frozen beef, chilled pork, frozen pork, chilled chicken, frozen chicken, etc.',
      remark: '涉證涉檢敏感貨物，快件方式不予收寄',
      remarkEn: 'Sensitive goods subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '香煙',
      titleEn: "Cigarette",
      example: '',
      exampleEn: '',
      remark: '國內實行煙草專賣，國外目的地涉及高額稅費，不予收寄',
      remarkEn: 'tobacco monopoly is implemented in domestic market, and foreign destinations require high taxes and fees, thus no cigarette will be accepted for mailing'
    }, {
      title: '外形較為敏感或內部機構無法拆分的貨物',
      titleEn: "Goods that are sensitive in shape or that cannot be splitted by internal structure",
      example: '如電器內膽、電子儀器、不明顆粒等',
      exampleEn: 'Such as liners of electrical appliances, electronic equipment, unknown particles, etc.',
      remark: '涉證涉檢敏感貨物，快件方式不予收寄',
      remarkEn: 'Sensitive goods subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '光碟',
      titleEn: "Compact Disc",
      example: '',
      exampleEn: '',
      remark: '涉證涉檢敏感貨物，快件方式不予收寄',
      remarkEn: 'Sensitive goods subject to certification and/or inspection will not be accepted for mailing by express courier service'
    }, {
      title: '稀有礦產自然資源、稀有其它自然資源',
      titleEn: "Rare mineral natural resources, other rare natural resources",
      example: '如銅、鋁等初級型材原材料等47種商品等',
      exampleEn: '47 kinds of products such as copper, aluminum and other elementary profile warps',
      remark: '出口配額類貨物，快件方式不得收寄',
      remarkEn: 'Goods subject to export quota will not be accepted for mailing by express courier service'
    }, {
      title: '食品類',
      titleEn: "foodstuffs",
      example: '包括食用產品；',
      exampleEn: 'Including edible products;',
      remark: '涉檢涉證敏感貨物，不予收寄',
      remarkEn: 'Sensitive goods subject to inspection and/or certification will not be accepted for mailing'
    }, {
      title: '藥品類',
      titleEn: "Pharmaceutical products",
      example: '所有藥物',
      exampleEn: 'All medicines',
      remark: '涉檢涉證敏感貨物，不予收寄',
      remarkEn: 'Sensitive goods subject to inspection and/or certification will not be accepted for mailing'
    }, {
      title: '目的地口岸特殊要求',
      titleEn: "Special requirements by the port of destination",
      example: '',
      exampleEn: '',
      remark: '涉檢涉證敏感貨物，不予收寄',
      remarkEn: 'Sensitive goods subject to inspection and/or certification will not be accepted for mailing'
    }, {
      title: '運輸限制',
      titleEn: "Restriction on transport",
      example: '易碎品不予收寄',
      exampleEn: 'Fragile items will not be accepted for mailing',
      remark: '航空運輸限制',
      remarkEn: 'Restriction on air transport'
    }
  ])

</script>

<template>
  <div class="contactOurBg py-[70px] text-center relative overflow-hidden">
    <h2 class="text-[30px]  fadeInLeft animated">{{$t('content.contact.contactTitle1')}}</h2>
    <h3 class="mt-[20px]  fadeInRight animated">{{$t('content.contact.contactTitle2')}}</h3>
    <div class="w-full absolute bottom-0 left-0 lg:left-1/2 lg:-translate-x-1/2 overflow-x-auto lg:w-[1024px] contentList pr-3">
      <div class="flex">
        <router-link v-for="(item, index) in tabsList" :key="index" :to="item.url" class="bg-white rounded-t-lg text-black ml-3 hover:text-[red] p-3 transition-all text-nowrap" :class="activeIndex === index ? 'active' : ''" @click="activeIndex = index">{{ item.label }}</router-link>
      </div>
    </div>
  </div>
  <div v-show="activeIndex === 0" class="flex justify-center">
    <div class="lg:w-[1024px] w-full p-3 pt-[50px]">
      <p>{{$t('content.contact.introducePage1')}}</p>
      <p class="mt-3">{{$t('content.contact.introducePage2')}}</p>
      <p>{{$t('content.contact.introducePage3')}}。</p>
      <p class="mt-3">{{$t('content.contact.introducePage4')}}</p>
      <p>{{$t('content.contact.introducePage5')}}</p>
      <p class="mt-3">{{$t('content.contact.introducePage6')}}</p>
      <p>{{$t('content.contact.introducePage7')}}</p>
    </div>
  </div>
  <div v-show="activeIndex === 1" class="flex justify-center">
    <div class="lg:w-[1024px] w-full p-3 pt-[50px]">
      <div class="flex flex-col justify-center items-center">
        <img src="@/assets/logo.png" alt="" width="150">
        <span class="text-[#ffc000] text-[15px]">{{$t('content.contact.teachePage1')}}</span>
      </div>
      <borderView class="indent-10">{{$t('content.contact.teachePage2')}}</borderView>
      <titleView text="01" />
      <borderView class="text-sm">
        <p>{{$t('content.contact.teachePage3')}}</p>
        <p>{{$t('content.contact.teachePage4')}}</p>
        <p>{{$t('content.contact.teachePage5')}}</p>
      </borderView>
      <div class="flex justify-center flex-col lg:flex-row">
        <img src="@/assets/img/cargoTeaching/screenshot3.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
        <img src="@/assets/img/cargoTeaching/screenshot1.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
      </div>
      <titleView text="02" />
      <borderView class="text-sm">
        <p>{{$t('content.contact.teachePage6')}}<b class="text-[red]">{{$t('content.contact.teachePage7')}}</b>{{$t('content.contact.teachePage8')}}<b class="text-[red]">{{$t('content.contact.teachePage9')}}</b>{{$t('content.contact.teachePage10')}}</p>
      </borderView>
      <div class="flex justify-center flex-col lg:flex-row">
        <img src="@/assets/img/cargoTeaching/screenshot2.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
      </div>
      <titleView text="03" />
      <borderView class="text-sm">
        <p class="indent-10">{{$t('content.contact.teachePage11')}}</p>
        <p>{{$t('content.contact.teachePage12')}}<b class="text-[red]">&nbsp;{{$t('content.contact.teachePage13')}}&nbsp;</b>{{$t('content.contact.teachePage14')}}</p>
        <p>{{$t('content.contact.teachePage15')}}<b class="text-[red]">&nbsp;{{$t('content.contact.teachePage16')}}&nbsp;</b>{{$t('content.contact.teachePage17')}}</p>
        <p class="text-[red]">{{$t('content.contact.teachePage18')}}</p>
      </borderView>
      <div class="flex justify-center flex-col lg:flex-row">
        <img src="@/assets/img/cargoTeaching/screenshot6.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
        <img src="@/assets/img/cargoTeaching/screenshot4.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
      </div>
      <titleView text="04" />
      <borderView class="text-sm indent-10">
        {{$t('content.contact.teachePage19')}}
      </borderView>
      <div class="flex justify-center flex-col lg:flex-row">
        <img src="@/assets/img/cargoTeaching/screenshot7.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
        <img src="@/assets/img/cargoTeaching/screenshot8.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
      </div>
      <titleView text="05" />
      <borderView class="text-sm indent-10">{{$t('content.contact.teachePage20')}}</borderView>
      <div class="flex justify-center flex-col lg:flex-row">
        <img src="@/assets/img/cargoTeaching/screenshot8.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
        <img src="@/assets/img/cargoTeaching/screenshot5.jpg" alt="" class="w-full lg:w-1/2 border-[10px] border-[transparent]">
      </div>
      <titleView text="06" />
      <borderView class="text-sm indent-10">{{$t('content.contact.teachePage21')}}</borderView>
      <div class="flex">
        <div class="w-[10px] bg-[#ffc000]" />
        <div class="bg-[#ffc000] flex-1 ml-2 px-[10px]">{{$t('content.contact.teachePage22')}}</div>
      </div>
      <borderView class="text-sm">
        <p>{{$t('content.contact.teachePage23')}}</p>
        <p>{{$t('content.contact.teachePage24')}}<b class="text-[red]">{{$t('content.contact.teachePage25')}}</b></p>
        <p>{{$t('content.contact.teachePage26')}}<b class="text-[red]">{{$t('content.contact.teachePage27')}}</b>。</p>
      </borderView>
    </div>
  </div>
  <div v-show="activeIndex === 2" class="flex justify-center">
    <div class="lg:w-[1024px] w-full p-3 pt-[50px] bg-[url(@/assets/img/Prohibited/Prohibited.png)]">
      <div class="flex justify-center">
        <img src="@/assets/logo.png" alt="" width="150">
      </div>
      <div class="my-[20px]">
        <div class="flex justify-between -mb-[10px]">
          <span class="w-[10px] h-[10px] bg-[#FFC000]" />
          <span class="w-[10px] h-[10px] bg-[#FFC000]" />
        </div>
        <div class="border border-[#DAC39A] p-[1em] text-[#FFC000] text-sm">{{$t('content.contact.prohibitedPage1')}}</div>
      </div>
      <div class="p-[5px] m-[5px] border-[2px] border-[#111] box-border">
        <div class="border border-[#aaa] p-[15px] text-center box-border">
          <div class="py-2">禁限運品參考清單</div>
          <div class="tracking-tighter font-bold py-2">List of Items Prohibited / Restricted for Transport</div>
        </div>
      </div>
      <div v-for="(item, index) in ProhibitedList" :key="index" class="mt-[38px] relative bg-[#f8f8f8] p-[2.2em]" style="box-shadow: -5px -5px 7px #e5e5e5;">
        <div class="absolute -top-[10px] left-0 w-[40px] h-[40px] bg-gradient-to-r from-[#24aeec] to-[#04d1dc] rounded-tl-xl text-center leading-[40px] text-white">{{ index + 1 }}</div>
        <p class="pt-[2em]">{{ item.title }}</p>
        <p>{{ item.titleEn }}</p>
        <div class="h-[1px] bg-gradient-to-r from-[transparent] via-[rgba(211,19,20,1)] to-[transparent] my-[10px]" />
        <p class="pt-[2em]">{{ item.example }}</p>
        <p>{{ item.exampleEn }}</p>
        <div class="h-[1px] bg-gradient-to-r from-[transparent] via-[rgba(211,19,20,1)] to-[transparent] my-[10px]" />
        <p class="mt-[15px]">{{ item.remark }}</p>
        <p>{{ item.remarkEn }}</p>
      </div>
      <div class="w-3/5 bg-[#EF7060] py-[0.8em] px-[0.5em] my-[5px] mx-[auto] text-white text-center">{{$t('content.contact.prohibitedPage2')}}</div>
    </div>
  </div>
  <div v-show="activeIndex === 3" class="flex justify-center">
    <div class="lg:w-[1024px] w-full p-3 pt-[50px] text-sm clause">
      <h2 class="text-center">{{$t('content.contact.ConditionsPage1')}}</h2>
      <h3 class="!font-normal">{{$t('content.contact.ConditionsPage2')}}</h3>
      <h3>一、{{$t('content.contact.ConditionsPage3')}}:</h3>
      <h4>1.{{$t('content.contact.ConditionsPage4')}}:</h4>
      <h5>1) {{$t('content.contact.ConditionsPage5')}}；</h5>
      <h5>2) {{$t('content.contact.ConditionsPage6')}}；</h5>
      <h5>3) {{$t('content.contact.ConditionsPage7')}}；</h5>
      <h5>4) {{$t('content.contact.ConditionsPage8')}}；</h5>
      <h5>5) {{$t('content.contact.ConditionsPage9')}}；</h5>
      <h5>6) {{$t('content.contact.ConditionsPage10')}}；</h5>
      <h5>7) {{$t('content.contact.ConditionsPage11')}}；</h5>
      <h5>8) {{$t('content.contact.ConditionsPage12')}}；</h5>
      <h5>9) {{$t('content.contact.ConditionsPage13')}}；</h5>
      <h5>10) {{$t('content.contact.ConditionsPage14')}}； </h5>
      <h5>11){{$t('content.contact.ConditionsPage15')}}；</h5>
      <h5>12){{$t('content.contact.ConditionsPage16')}}；</h5>
      <h5>13){{$t('content.contact.ConditionsPage17')}}；</h5>
      <h5>14){{$t('content.contact.ConditionsPage18')}}；</h5>
      <h5>15){{$t('content.contact.ConditionsPage19')}}。</h5>
      <h4>2.{{$t('content.contact.ConditionsPage20')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage21')}}。</h4>
      <h4>4.{{$t('content.contact.ConditionsPage22')}}。</h4>
      <h4>5.{{$t('content.contact.ConditionsPage23')}}。</h4>
      <h4>6.{{$t('content.contact.ConditionsPage24')}}。</h4>
      <h4>7.{{$t('content.contact.ConditionsPage25')}}。</h4>
      <h4>8.{{$t('content.contact.ConditionsPage26')}}。</h4>
      <h4>9.{{$t('content.contact.ConditionsPage27')}}。</h4>
      <h4>10.{{$t('content.contact.ConditionsPage28')}}。</h4>
      <h4>11.{{$t('content.contact.ConditionsPage29')}}。</h4>
      <h4>12.{{$t('content.contact.ConditionsPage30')}}︰</h4>
      <h4>{{$t('content.contact.ConditionsPage31')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage32')}}</h4>
      <h4>{{$t('content.contact.ConditionsPage33')}}</h4>
      <h4>{{$t('content.contact.ConditionsPage34')}}</h4>
      <h4>{{$t('content.contact.ConditionsPage35')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage36')}}</h4>
      <h4>13.{{$t('content.contact.ConditionsPage37')}}。</h4>
      <h4>14.{{$t('content.contact.ConditionsPage38')}}。</h4>
      <h4>18.{{$t('content.contact.ConditionsPage39')}}。</h4>
      <h4>19.{{$t('content.contact.ConditionsPage40')}}。</h4>
      <h4>20.{{$t('content.contact.ConditionsPage41')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage42')}}</h4>
      <h4>{{$t('content.contact.ConditionsPage43')}}</h4>
      <h4>21.{{$t('content.contact.ConditionsPage44')}}。</h4>
      <h4>22.{{$t('content.contact.ConditionsPage45')}}。</h4>
      <h4>23.{{$t('content.contact.ConditionsPage46')}}。</h4>
      <h4>24.{{$t('content.contact.ConditionsPage47')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage48')}}</h4>
      <h4>25.{{$t('content.contact.ConditionsPage49')}}。</h4>
      <h4>26.{{$t('content.contact.ConditionsPage50')}}。</h4>
      <h4>27.{{$t('content.contact.ConditionsPage51')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage52')}}</h4>
      <h4>28. {{$t('content.contact.ConditionsPage53')}}。</h4>
      <h4>29.{{$t('content.contact.ConditionsPage54')}}。</h4>
      <h4>30.{{$t('content.contact.ConditionsPage55')}}。</h4>
      <h3>二、{{$t('content.contact.ConditionsPage56')}}：</h3>
      <h4>1.{{$t('content.contact.ConditionsPage57')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage58')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage59')}}。</h4>
      <h3>三、{{$t('content.contact.ConditionsPage60')}}：</h3>
      <h4>1.{{$t('content.contact.ConditionsPage61')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage62')}}。</h4>
      <h3>四、{{$t('content.contact.ConditionsPage63')}}:</h3>
      <h4>1.{{$t('content.contact.ConditionsPage64')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage65')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage66')}}：</h4>
      <h5>1) {{$t('content.contact.ConditionsPage67')}}。</h5>
      <h5>2) {{$t('content.contact.ConditionsPage68')}}。</h5>
      <h5>3) {{$t('content.contact.ConditionsPage69')}}。</h5>
      <h4>4.{{$t('content.contact.ConditionsPage70')}}。</h4>
      <h4>5.{{$t('content.contact.ConditionsPage71')}}。</h4>
      <h4>6. {{$t('content.contact.ConditionsPage72')}}。</h4>
      <h3 class="mt-3">五、{{$t('content.contact.ConditionsPage73')}}：</h3>
      <h4>{{$t('content.contact.ConditionsPage74')}}。</h4>
      <h4>1.{{$t('content.contact.ConditionsPage75')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage76')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage77')}}。</h4>
      <h4>5 {{$t('content.contact.ConditionsPage78')}}:</h4>
      <h5>1).{{$t('content.contact.ConditionsPage79')}};</h5>
      <h5>2).{{$t('content.contact.ConditionsPage80')}}:</h5>
      <h5>3).{{$t('content.contact.ConditionsPage81')}}</h5>
      <h4>5.{{$t('content.contact.ConditionsPage82')}}:</h4>
      <h4>{{$t('content.contact.ConditionsPage83')}}:</h4>
      <h5>{{$t('content.contact.ConditionsPage84')}}；</h5>
      <h5>{{$t('content.contact.ConditionsPage85')}};</h5>
      <h5>{{$t('content.contact.ConditionsPage86')}}</h5>
      <h5>{{$t('content.contact.ConditionsPage87')}}</h5>
      <h4>{{$t('content.contact.ConditionsPage88')}}：</h4>
      <h5>{{$t('content.contact.ConditionsPage89')}}；</h5>
      <h5>{{$t('content.contact.ConditionsPage90')}}</h5>
      <h5>{{$t('content.contact.ConditionsPage91')}}</h5>
      <h5>{{$t('content.contact.ConditionsPage92')}}</h5>
      <h5>{{$t('content.contact.ConditionsPage93')}}</h5>
      <h5>{{$t('content.contact.ConditionsPage94')}}。</h5>
      <h3 class="mt-3">六、{{$t('content.contact.ConditionsPage94')}}</h3>
      <h4>1．{{$t('content.contact.ConditionsPage95')}}</h4>
      <h4>2．{{$t('content.contact.ConditionsPage96')}}： </h4>
      <h5>i) {{$t('content.contact.ConditionsPage97')}}。</h5>
      <h5>ii) {{$t('content.contact.ConditionsPage98')}}.</h5>
      <h5>iii) {{$t('content.contact.ConditionsPage99')}}。</h5>
      <h5>iv) {{$t('content.contact.ConditionsPage100')}}。</h5>
      <h5>{{$t('content.contact.ConditionsPage101')}}。</h5>
      <h4>3．{{$t('content.contact.ConditionsPage102')}}。</h4>
      <h4>4．{{$t('content.contact.ConditionsPage103')}}。</h4>
      <h5>A、{{$t('content.contact.ConditionsPage104')}}</h5>
      <h5>B、{{$t('content.contact.ConditionsPage105')}}</h5>
      <h5>C、{{$t('content.contact.ConditionsPage106')}}</h5>
      <h5>D、{{$t('content.contact.ConditionsPage107')}}</h5>
      <h5>E、{{$t('content.contact.ConditionsPage108')}}</h5>
      <h5>F、{{$t('content.contact.ConditionsPage109')}}</h5>
      <h4>5．{{$t('content.contact.ConditionsPage110')}}。</h4>
      <h4>6．{{$t('content.contact.ConditionsPage111')}}。</h4>
      <h3>七、{{$t('content.contact.ConditionsPage112')}}</h3>
      <h4>1．{{$t('content.contact.ConditionsPage113')}}。</h4>
      <h4>2．{{$t('content.contact.ConditionsPage114')}}。</h4>
      <h4>3．{{$t('content.contact.ConditionsPage115')}}:</h4>
      <h5>{{$t('content.contact.ConditionsPage116')}}。</h5>
      <h3>八、{{$t('content.contact.ConditionsPage117')}}</h3>
      <h4>1.{{$t('content.contact.ConditionsPage118')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage119')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage120')}}。</h4>
      <h3>十、{{$t('content.contact.ConditionsPage121')}}</h3>
      <h4>1.{{$t('content.contact.ConditionsPage122')}}。</h4>
      <h4>{{$t('content.contact.ConditionsPage123')}}</h4>
      <h4>3.{{$t('content.contact.ConditionsPage124')}}。</h4>
      <h4>4.{{$t('content.contact.ConditionsPage125')}}。</h4>
      <h4>5.{{$t('content.contact.ConditionsPage126')}}。</h4>
      <h4>6.{{$t('content.contact.ConditionsPage127')}}。</h4>
      <h4>7.{{$t('content.contact.ConditionsPage128')}}。</h4>
      <h4>8.{{$t('content.contact.ConditionsPage129')}}。</h4>
      <h4>9.{{$t('content.contact.ConditionsPage130')}}。</h4>
      <h3>十一、{{$t('content.contact.ConditionsPage131')}}</h3>
      <h4>1.{{$t('content.contact.ConditionsPage132')}}。</h4>
      <h4>2.{{$t('content.contact.ConditionsPage133')}}。</h4>
      <h4>3.{{$t('content.contact.ConditionsPage134')}}</h4>
      <h4>4.{{$t('content.contact.ConditionsPage135')}}。</h4>
      <h4>5.{{$t('content.contact.ConditionsPage136')}}。</h4>
      <h5>- {{$t('content.contact.ConditionsPage137')}}。</h5>
      <h5>- {{$t('content.contact.ConditionsPage138')}}。</h5>
      <h4>6.{{$t('content.contact.ConditionsPage139')}}。</h4>
      <h4>7.{{$t('content.contact.ConditionsPage140')}}。</h4>
      <h4>8.{{$t('content.contact.ConditionsPage141')}}。</h4>

    </div>
  </div>
  <div class="bg-[#E70012] py-[25px] flex flex-col justify-center items-center lg:flex-row">
    <div class="text-3xl text-white mr-3 text-center mb-3">{{$t('content.contact.footerQuestion')}}</div>
    <div class="flex justify-center items-center rounded-[50px] bg-white px-14 py-2 text-[red] cursor-pointer">{{$t('content.contact.DetailedUnderstanding')}}</div>
  </div>
</template>

<style scoped>
.contactOurBg {
  background: url(@/assets/img/contactOurBg.jpg) #f8f8f9 top center no-repeat;
  background-size: cover;
  color: #fff;
}

.contentList::-webkit-scrollbar {
  display: none;
}

.clause h2 {
  font-weight: bold;
}

.clause h3 {
  font-weight: bold;
  text-indent: 2em;
}

.clause h4 {
  text-indent: 4em;
}

.clause h5 {
  text-indent: 6em;
}
.active{
  color: red;
 }
</style>
